<template>
  <div>
    <!-- v-model="pageConfig" -->
    <main-page
      :page-config="pageConfig"
      :search-data="searchForm"
      :form-data="form"
      :table-data="tableData"
      @tableAdd="tableAdd"
      @pageBtnCB="pageBtnCB"
    ></main-page>
    <!-- <v-text-field label="" outlined></v-text-field>
    <v-text-field
      persistent-placeholder
      label="12312"
      placeholder="adawdwa"
      outlined
      hint="www.example.com/page"
      persistent-hint
    ></v-text-field>
    <svg-icon icon-class="search"></svg-icon> -->
  </div>
</template>

<script>
// import { getWarrantyList, testFresh } from '@/api/test'
import MainPage from '@/components/BaseComponents/MainPage/MainPage.vue'
import { isRequired } from '@/utils/validate'
import { STATUS_MAP } from '@/variables/dataVariables'
import { findItem } from '@/utils/arraySort'
export default {
  // 普通表格
  name: 'NormalTable',

  components: {
    MainPage
  },

  props: {},

  data() {
    return {
      items: [{ text: '你好', value: 'hello' }],
      search: '',
      tableData: [],
      headers: [
        { text: '姓名', align: 'start', value: 'name' },
        { text: '地址', value: 'address' },
        { text: '状态', value: 'status' },
        { text: '标识', value: 'flag' }
      ],

      searchForm: {},
      form: {},

      pageConfig: {
        // addBtn: { title: 'dawdaw',/* class: 'dawd111' /* disabled: false */ },
        // addBtnDisabled: true,
        // addBtnShow: false,
        // addBtnClass: 'awda',
        // addBtnShow: 0,
        // addBtn: { show: 1, disabled: false, class: '12312', size: 'normal' },
        operationBtnList: [
          {
            title: '新增2',
            method: 'tableAdd2',
            class: 'xxxx',
            disabled: false,
            icon: 'search'
          }
        ],
        searchOptions: {
          // class: 'ma-4',
          searchOperation: [
            {
              title: 'search1',
              method: 'search1',
              class: 'xxxx',
              disabled: false,
              icon: 'search'
            },
            {
              title: 'search2',
              method: 'search2',
              class: 'xxxx',
              disabled: false
            }
          ]
        },
        dialogConfig: { title: 'normal table dialog title', width: '70%' },
        itemConfig: [
          {
            label: 'id',
            prop: 'id',
            type: 'text',
            rules: [isRequired],
            search: true,
            searchCols: 4
            // xlCol: 3
          },
          {
            label: '姓名',
            prop: 'name',
            type: 'text',
            rules: [isRequired],
            search: true,
            searchCols: 6
          },
          {
            label: '测试计数器',
            prop: 'testNumber',
            type: 'number',
            tableShow: false
          },
          {
            label: 'flag',
            prop: 'flag'
          },
          {
            label: 'code1',
            prop: 'code1',
            mapType: 'M1'
          },
          {
            label: 'code2',
            prop: 'code2',
            mapType: 'M1-1'
          },
          {
            label: 'code3',
            prop: 'code3'
          },
          {
            label: '状态',
            prop: 'status',
            map: STATUS_MAP
          }
        ],
        tableOptions: {
          indexShow: false,
          selectShow: false
        },
        list: this.getTableList,
        tableTotal: 0,
        pagination: this.params
      },
      params: {
        current: 1,
        size: 20
      }
    }
  },

  computed: {},

  watch: {},

  created() {
    // console.log(...STATUS_MAP)
  },

  mounted() {
    console.log(findItem(STATUS_MAP, 'value', 'available'))
    // this.getTableList()
  },

  methods: {
    filterOnlyCapsText(value, search, item) {
      return (
        value != null &&
        search != null &&
        typeof value === 'string' &&
        value
          .toString()
          .toLocaleUpperCase()
          .indexOf(search) !== -1
      )
    },

    /*     async getTableList() {
      const res = await getWarrantyList(this.params)
      this.tableData = res.data.records
      this.pageConfig.tableTotal = this.tableData.length
      this.pageConfig.pagination = this.params
    }, */

    pageBtnCB(methodName, el) {
      this[methodName](el)
    },

    tableAdd() {
      console.log('table add')
    },

    tableAdd2() {
      // this.pageConfig.itemConfig[0].rules = []
      // this.pageConfig.itemConfig[0].disabled = false
      this.pageConfig.dialogConfig.show = true
      // console.log(this.pageConfig, this)
      // this.$set(this.pageConfig.itemConfig, 0, this.pageConfig.itemConfig[0])

      /** searchForm */
      // this.pageConfig.itemConfig[1].search = true
      // this.$set(this.pageConfig.itemConfig, 1, this.pageConfig.itemConfig[1])

      // this.pageConfig.operationBtnList[0].disabled = true
      // this.$set(this.pageConfig, 'addBtnDisabled', true)
      // this.pageConfig.addBtn.disabled = true
      setTimeout(() => {
        // this.pageConfig.itemConfig[0].rules = [isRequired]
        /** searchForm */
        // this.pageConfig.itemConfig[1].search = false
        // this.$set(this.pageConfig.itemConfig, 1, this.pageConfig.itemConfig[1])
        // this.pageConfig.operationBtnList[0].disabled = false
        // this.$set(this.pageConfig, 'addBtnDisabled', false)
        // this.pageConfig.addBtn.disabled = false
      }, 5000)
      console.log('custom btn defined method')
    }
  }
}
</script>
